<template>
  <div>
    <h1>toRaw() & unref() & markRaw()</h1>
    <p>toRaw() & unref() 看手册</p>

    <div class="group">
      <button type="button" @click="editmarkRaw">修改markRaw</button>
    </div>
    <div class="group">
      {{ slrefdataObj3.count }}
    </div>
    <div class="group">
      <ul>
        <li v-for="item in slrefdataObj3.strArr" :key="item">{{ item }}</li>
      </ul>
    </div>
    <div class="group">
      <ul>
        <li v-for="(item, name) in slrefdataObj3.user" :key="name">{{ item }}</li>
      </ul>
    </div>

    <div class="group">
      <ul>
        <li v-for="(item, name) in slrefdataObj3.markFoo" :key="name">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Study3StuDemo8'
}
</script>
<script setup lang="ts">
import { isReactive, markRaw, reactive, customRef } from 'vue'

// function useDebouncedRef(value: any) {
//   return customRef((track, trigger) => {
//     return {
//       get() {
//         track()
//         return value
//       },
//       set(newValue) {
//         value = newValue
//         trigger()
//       }
//     }
//   })
// }

const foo = markRaw([243, 23, 42, 34, 2, 42, 4])
console.log(isReactive(reactive(foo))) // false

let dataObj3 = {
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '许家印',
    sex: 'nan',
    age: 42,
    aihao: {}
  }
}

let slrefdataObj3 = reactive({
  ...dataObj3,
  markFoo: foo
})

const editmarkRaw = () => {
  // 以下属性都有响应性，测试的时候不要喝 非响应性的 markFoo在一起测试，否则会触发非相应属性渲染
  // slrefdataObj3.count++
  // slrefdataObj3.strArr.push('3432423')
  // slrefdataObj3.user.name = '粥杰伦'

  slrefdataObj3.markFoo.push(999999)
}
</script>

<style lang="scss" scoped>
.group {
  padding: 20px;
  border: 2px solid #abcdef;
  margin: 10px 0;
}
</style>
